<template>
    <div class="wtTextWrap">

         <span class="categoryItem">
            <span class="categoryItemTitle">操作</span>
            <span class="categoryItemContent">
                <button @click="removeText">删除</button>
            </span>
        </span>

        <span class="categoryItem">
            <span class="categoryItemTitle">名称</span>
            <span class="categoryItemContent">
                <label>
                     <input @keydown="renameTextInput"
                            type="text"
                            v-bind:value="textName"
                            disabled="disabled"
                     >&nbsp;
                </label>
                <i class="icon iconfont icon-xiugai editor-ico" @click="renameText"></i>
            </span>
        </span>

        <span class="categoryItem">
            <span class="categoryItemTitle">位置</span>
            <span class="categoryItemContent position">
                <div>
                    <span class="shadowBox">&nbsp; X
                        <label>
                             <input class="positionInput" type="text"
                                    v-bind:value="dataObj.offsetX"
                                    v-on:keydown="changeVal($event, dataObj, 'offsetX')">
                        </label>
                    </span>
                     <span class="shadowBox">&nbsp; Y
                         <label>
                              <input class="positionInput" type="text"
                                     v-bind:value="dataObj.offsetY"
                                     v-on:keydown="changeVal($event, dataObj, 'offsetY')">
                         </label>
                    </span>
                 </div>
            </span>
        </span>

        <span class="categoryItem">
            <span class="categoryItemTitle">尺寸</span>
            <span class="categoryItemContent position">
                <div>
                    <span class="shadowBox">&nbsp; W
                        <label>
                             <input class="positionInput" type="text"
                                    v-bind:value="dataObj.sizeX"
                                    v-on:keydown="changeVal($event, dataObj, 'sizeX')">
                        </label>
                    </span>
                     <span class="shadowBox">&nbsp; H
                         <label>
                              <input class="positionInput" type="text"
                                     v-bind:value="dataObj.sizeY"
                                     v-on:keydown="changeVal($event, dataObj, 'sizeY')">
                         </label>
                    </span>
                 </div>
            </span>
        </span>

        <span class="categoryItem">
            <span class="categoryItemTitle">字号</span>
            <label><input class="fontSizeInput" type="text" v-bind:value="fontSize" v-on:keydown="changeVal($event, dataObj, 'font')"></label>
            <span class="fontStyleContainer">
                <i class="icon iconfont icon-jiacu first" @click="changeFontStyle"></i>
                <i class="icon iconfont icon-xieti" @click="changeFontStyle"></i>
            </span>
        </span>

        <span class="categoryItem">
            <ColorPicker :color="dataObj.color" :colorType="colorType" class="textColorPicker" :callBackName="callBackName"/>
        </span>

        <span class="categoryItem">
            <span class="categoryItemTitle">分布</span>
            <span class="fontPositionContainer textAline">
                <i class="icon iconfont icon-zuo first" @click="changeFontPosition($event, 'x', ANCHOR_LEFT)"></i>
                <i class="icon iconfont icon-zhong" @click="changeFontPosition($event, 'x', ANCHOR_CENTER)"></i>
                <i class="icon iconfont icon-you last" @click="changeFontPosition($event, 'x', ANCHOR_RIGHT)"></i>
            </span>
            <span class="fontPositionContainer">
                <i class="icon iconfont icon-shang first" @click="changeFontPosition($event, 'y', ANCHOR_TOP)"></i>
                <i class="icon iconfont icon-shuiping" @click="changeFontPosition($event, 'y', ANCHOR_MIDDLE)"></i>
                <i class="icon iconfont icon-xia last" @click="changeFontPosition($event, 'y', ANCHOR_BOTTOM)"></i>
            </span>
        </span>

        <span class="categoryItem">
            <span class="categoryItemTitle">居中方式</span>
            <OptionPickerCmp
                    class="textAlineType"
                    :data="textAlineTypeOption"
                    :materialData="dataObj"
                    :target="target"
                    :className="className"
                    :callBackName="textAlineChanged"
            />
        </span>

        <span class="categoryItem textareaItem">
          <label><textarea cols="40" rows="9" placeholder="内容编辑..." @keydown="setText" v-model="dataObj.text"></textarea></label>
        </span>

    </div>
</template>

<script>
    /* eslint-disable */
    import $ from "jquery";
    import Vue from "vue";
    import ColorPicker from "@/components/styleComponents/colorPickerCmp.vue";
    import OptionPickerCmp from "@/components/styleComponents/optionPickerCmp.vue";

    export default {
        name: "wtTextCmp",

        data () {
            return {

                dataObj: this.$props.data,

                textName: "",

                fontSize: "",

                widgetTx: null,

                fontStyleList: [""],

                colorType: "字体颜色",

                callBackName: "onTextColorChanged",

                ANCHOR_LEFT: Halo.ANCHOR_LEFT,
                ANCHOR_CENTER: Halo.ANCHOR_CENTER,
                ANCHOR_RIGHT: Halo.ANCHOR_RIGHT,
                ANCHOR_TOP: Halo.ANCHOR_TOP,
                ANCHOR_MIDDLE: Halo.ANCHOR_MIDDLE,
                ANCHOR_BOTTOM: Halo.ANCHOR_BOTTOM,

                textAlineTypeOption: [
                    {key: "LEFT", value:  Halo.ANCHOR_LEFT, selected: false},
                    {key: "CENTER", value: Halo.ANCHOR_CENTER , selected: false},
                    {key: "RIGHT", value: Halo.ANCHOR_RIGHT , selected: false},
                ],

                target: "text_align",

                className: ".textAlineType",

                textAlineChanged: "onTextAlineChanged",
            };
        },

        components: {ColorPicker, OptionPickerCmp},

        props: ["data"],

        created () {

            const _this = this;

            this.init();

            this.$root.$on("onTextColorChanged", _this.onTextColorChanged);
            this.$root.$on("onTextAlineChanged", _this.onTextAlineChanged);

            this.resetOptionStyle();
        },

        watch: {
            data () {
                this.init();
            }
        },

        methods: {

            init () {

                this.dataObj = this.$props.data;

                this.textName = this.dataObj.name || "";
                this.fontSize = this.getFontSize();

                this.dataObj.color = this.setColor();

                this.widgetTx = Halo.Config.scene().getWidgetRoot().getChild(this.textName);

                this.setTextAlineType();

                this.$nextTick(() => {

                    this.setFontPosition();
                });

                this.$root.$emit("pickDataChanged", {
                    className: ".textAlineType",
                    dataObj: this.dataObj,
                    option: this.textAlineTypeOption
                });
            },

            renameTextInput (e) {

                if (e.keyCode === 13) {

                    $(e.target).attr("disabled", "disabled");

                    const name = $.trim($(e.target).val());

                    if (name && this.textName) {

                        Editor.rename("wgt", this.textName, name);

                        this.widgetTx.name = name;

                        this.setEntityNameInScene(this.textName, name);
                    }
                }
            },

            renameText (e) {

                $(e.target).siblings().find("input").removeAttr("disabled");
                $(e.target).siblings().find("input").focus();
            },

            changeVal (e, data, param) {

                if (e.keyCode === 13 && this.widgetTx !== null) {

                    const target = e.target;

                    if (param === "font") {

                        if (target.value.search(/px/) < 0) {
                            target.value = target.value + "px";
                        }

                        data["font"] =  target.value + " Arial";

                        this.widgetTx.font =  data["font"];

                        this.widgetTx.refresh();

                        return

                    }

                    if (param === "offsetX") {

                        this.widgetTx.setFormulaOffsetX(target.value || 0);

                        this.dataObj.offsetX = this.widgetTx._formulaOffsetX.toString().replace(/^[\s\S]*return\s*|;[^;]*\}$/g, '');

                    } else if (param === "offsetY") {

                        this.widgetTx.setFormulaOffsetY(target.value || 0);

                        this.dataObj.offsetY = this.widgetTx._formulaOffsetY.toString().replace(/^[\s\S]*return\s*|;[^;]*\}$/g, '');

                    } else if (param === "sizeX") {

                        this.widgetTx.setFormulaSizeX(target.value || 0);

                        this.dataObj.sizeX = this.widgetTx._formulaSizeX.toString().replace(/^[\s\S]*return\s*|;[^;]*\}$/g, '');

                    } else if (param === "sizeY") {

                        this.widgetTx.setFormulaSizeY(target.value || 0);

                        this.dataObj.sizeY = this.widgetTx._formulaSizeY.toString().replace(/^[\s\S]*return\s*|;[^;]*\}$/g, '');
                    }

                    this.widgetTx.refresh();

                    // TODO
                    // this.$store.dispatch('edited', {
                    //     target: target,
                    //     value: data[param]
                    // });
                }
            },

            removeText () {

                Editor.remove("wgt", this.dataObj.name);

                this.setEntityNameInScene(this.dataObj.name, null);

                Vue.prototype.baseConfig.text = this.getRootTextWidgets(Halo.Config.get().widgets);

                this.$root.$emit("outLineDataChanged");
            },

            getRootTextWidgets (widgets) {

                const widgetsObj = {};

                let k = "";
                for (k in widgets) {
                    if (widgets.hasOwnProperty(k) && widgets[k].class === "WtText") {
                        widgetsObj[widgets[k].name] = widgets[k];
                    }
                }

                return widgetsObj;
            },

            getFontSize () {

                if (this.dataObj.hasOwnProperty("font")) {

                    let font = this.dataObj.font;
                    font = font.substring(0, font.search(/px/)) || 20;

                    return font + "px";
                }

                return "20px";

            },

            changeFontStyle (e) {

                if (this.widgetTx === null) return;

                const target = $(e.target);

                if (target.index() === 0) {

                    if ($(e.target).hasClass("selected")) {

                        const findIndex = this.widgetTx.font.search(/\sbold/);

                        this.widgetTx.font =  this.widgetTx.font.substring(0, findIndex);

                        this.dataObj.font = this.widgetTx.font;

                    } else {

                        this.widgetTx.font = this.widgetTx.font + " bold";

                        this.dataObj.font = this.widgetTx.font;
                    }

                } else if (target.index() === 1) {

                    if ($(e.target).hasClass("selected")) {

                        const findIndex = this.widgetTx.font.search(/italic\s/);

                        this.widgetTx.font =  this.widgetTx.font.substring(findIndex + 7);

                        this.dataObj.font = this.widgetTx.font;

                    } else {

                        this.widgetTx.font = "italic " + this.widgetTx.font;

                        this.dataObj.font = this.widgetTx.font;
                    }
                }

                this.widgetTx.refresh();

                $(e.target).toggleClass("selected");
            },

            setColor () {
                return this.dataObj.color ? new Halo.Color(this.dataObj.color) : new Halo.Color("#000000");
            },

            setFontPosition () {

                const fontPositionContainer = $(".fontPositionContainer");

                if (!this.dataObj.anchor) {

                    fontPositionContainer.eq(0).find("i").eq(0).addClass("selected").siblings().removeClass("selected");
                    fontPositionContainer.eq(1).find("i").eq(0).addClass("selected").siblings().removeClass("selected");

                    return;
                }

                const xIndex = this.dataObj.anchor.x - 1;
                const yIndex = this.dataObj.anchor.y - 4;

                fontPositionContainer.eq(0).find("i").eq(xIndex).addClass("selected").siblings().removeClass("selected");
                fontPositionContainer.eq(1).find("i").eq(yIndex).addClass("selected").siblings().removeClass("selected");
            },

            onTextColorChanged (hexColor) {

                if (this.widgetTx !== null && hexColor) {

                    this.widgetTx.color = new Halo.Color(hexColor);
                }
            },

            changeFontPosition (e, param, val) {

                $(e.target).addClass("selected").siblings().removeClass("selected");

                if (!this.dataObj.anchor) {

                    this.widgetTx._anchorH = this.ANCHOR_LEFT;
                    this.widgetTx._anchorV = this.ANCHOR_TOP;

                    this.dataObj.anchor = {x: this.ANCHOR_LEFT, y: this.ANCHOR_TOP};
                }

                if (param === "x") {

                    this.widgetTx.setAnchorType(val, this.widgetTx._anchorV);

                } else if (param === "y") {

                    this.widgetTx.setAnchorType(this.widgetTx._anchorH, val);
                }

                this.dataObj.anchor[param] = val;
            },

            setText (e) {

                if (e.keyCode === 13 && this.widgetTx !== null) {

                    this.dataObj.text = this.dataObj.text.replace(/\r*/g, "");

                    this.widgetTx.text = this.dataObj.text;

                    this.widgetTx.refresh();
                }
            },

            setTextAlineType () {

                if (!this.dataObj.text_align) {

                    this.dataObj.text_align = this.ANCHOR_LEFT;

                    this.widgetTx.text_align = this.ANCHOR_LEFT;
                }

                this.textAlineTypeOption.map((item) => item.selected = false);

                this.textAlineTypeOption[this.dataObj.text_align - 1].selected = true;
            },

            resetOptionStyle () {

                this.$nextTick(() => {

                    const styleObj = {
                        "padding": 0,
                        "paddingLeft": "6px",
                        "height": "30px",
                        "lineHeight": "30px",
                        "boxSizing": "border-box",
                    };

                    $(".wtTextWrap .categoryItem .textAlineType .optionList span").css(styleObj);

                    $(".textColorPicker>span").css("paddingLeft", "14px");

                    $(".textColorPicker>.picker").css({"top": "8px", "left": "112px"});

                });
            },

            onTextAlineChanged (alineType) {

                if (this.widgetTx !== null && typeof alineType === "number") {

                    this.widgetTx.text_align = alineType;
                }
            },

            setEntityNameInScene (oldName, newName) {

                let widgets = Halo.Config.scene()._widgets;

                let i = 0;
                for (i; i < widgets.length ; i++) {

                    if (widgets[i] === oldName) {

                        if (newName === null) {

                            delete widgets[i];

                            widgets = widgets.filter((name) => name);
                        } else {
                            widgets[i] = newName;
                        }

                        return;
                    }
                }
            },
        },
    }
</script>

<style scoped>
    .wtTextWrap {
        width: 100%;
        color: rgba(182, 184, 220, 1);
        box-sizing: border-box;
        margin: 0 auto;
        position: relative;
    }

    .wtTextWrap .categoryItem {
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        display: block;
        width: 100%;
        position: relative;
    }

    .wtTextWrap .categoryItemTitle {
        font-size: 12px;
        font-weight: 100;
        padding-left: 15px;
    }

    .wtTextWrap .categoryItem .categoryItemContent i {
        color: rgba(61,63,86,1);
        cursor: pointer;
    }

    .wtTextWrap .categoryItem .categoryItemContent input {
        text-align: right;
        background: transparent;
        border: none;
        font-size:14px;
        font-weight:100;
        color:rgba(182,184,220,1);
    }

    .wtTextWrap .categoryItem .fontSizeInput {
        text-align: left;
        width:115px;
        height:30px;
        background:rgba(65,67,91,1);
        border: none;
        border-radius:5px;
        font-size:14px;
        font-weight:100;
        color:rgba(182,184,220,1);
        position: absolute;
        right: 102px;
        top: 5px;
        padding-left: 14px;
    }

    .wtTextWrap .categoryItem .fontStyleContainer {
        position: absolute;
        right: 24px;
        top: 5px;
        height: 30px;
        line-height: 30px;
    }

    .wtTextWrap .categoryItem .fontPositionContainer {
        position: absolute;
        right: 24px;
        top: 6px;
    }

    .wtTextWrap .categoryItem .fontPositionContainer.textAline {
        right: 127px;
    }

    .wtTextWrap .categoryItem .fontStyleContainer i, .wtTextWrap .categoryItem .fontPositionContainer i {
        display: inline-block;
        width: 20px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        vertical-align: top;
        border:1px solid rgba(65, 67, 91, 1);
        box-sizing: border-box;
        font-size:14px;
        font-family:PingFangSC-Semibold,serif;
        font-weight:600;
        color:rgba(182,184,220,1);
        cursor: pointer;
    }

    .wtTextWrap .categoryItem .fontPositionContainer i {
        height: 28px !important;
    }

    .wtTextWrap .categoryItem .fontStyleContainer i.first {
        border-right: none;
    }

    .wtTextWrap .categoryItem .fontStyleContainer i.last {
        border-left: none;
    }

    .wtTextWrap .categoryItem .categoryItemContent i:hover {
        color: rgba(105,108,145,1);
    }

    .wtTextWrap .categoryItem .categoryItemContent {
        position: absolute;
        right: 24px;
    }

    .wtTextWrap .categoryItem .categoryItemContent button {
        height: 20px;
        width: 58px;
        font-size: 12px;
        font-weight: 300;
        border-radius: 5px;
        background: rgba(61, 63, 86, 1);
        box-sizing: border-box;
        line-height: 20px;
    }

    .wtTextWrap .categoryItem .categoryItemContent button:hover {
        background: rgb(145, 61, 67);
    }

    .wtTextWrap .categoryItem .categoryItemContent.position {
        width: 208px;
        height: 30px;
        background-color: rgba(31, 33, 49, 1);
        border-radius:5px;
        line-height: 30px;
        top: 5px;
    }

    .wtTextWrap .categoryItem .categoryItemContent.position div {
        display: flex;
        justify-content: space-around;
    }

    .wtTextWrap .categoryItem .categoryItemContent .positionInput {
        border: none;
        background-color: transparent;
        width: 39px;
        color: rgba(182,184,220,1);
        font-size: 13px;
        vertical-align: baseline;
        box-sizing: border-box;
        text-align: left;
    }

    .wtTextWrap .categoryItem .categoryItemContent .shadowBox {
        font-size: 13px;
        font-weight: 300;
        color: rgba(65,67,91,1);
    }

    .wtTextWrap .categoryItem.textareaItem textarea {
        resize: none;
        border: 1px solid rgba(105, 108, 145, 1);
        border-radius: 5px;
        background:rgba(31,33,49,1);
        position: absolute;
        right: 24px;
        top: 20px;
        padding: 14px 0 0 15px;
        font-size:12px;
        font-family:PingFangSC-Thin,serif;
        font-weight:100;
        color:rgba(182,184,220,1);
        box-sizing: border-box;
    }

    .wtTextWrap .categoryItem.textareaItem {
        height: 210px !important;
    }

    .textAlineType {
        position: absolute;
        right: 24px;
        top: 8px;
    }




    .wtTextWrap .categoryItem .fontStyleContainer i.selected, .wtTextWrap .categoryItem .fontPositionContainer i.selected {
        background: rgba(65, 67, 91, 1);
    }
</style>